<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>The Mobile Experience</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700|Hind:400,600,300" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
  <!-- <link rel="stylesheet" href="css/my.css"> -->  <!-- 我的答案1 -->
  <link rel="stylesheet" href="css/my_2.css">  <!-- 我的答案2 -->
  <!-- <link rel="stylesheet" href="css/solution.css"> --> <!-- 标准答案https://discussions.youdaxue.com/t/topic/52279，使用了flex -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- current design is from http://rafaelderolez.be/, would need to be replaced if lab approved -->
</head>
<body>
  <div class="container">
    <section class="picture">
      <div class="intro">
        <h1>Hello, I'm Jenna!</h1>
        <h1>I make <em>websites</em>.</h1>
      </div>
      <div class="background">
      </div>
    </section>
    <section class="resume">
      <section class="part">
        <div class="sidebar">
          <span class="tag">Jenna Garcia</span>
        </div>
        <div class="main">
          <p>
            Hello! I'm  Jenna. A web developer from New York City, currently working at a Silicon Valley startup called, Fomotograph.
          </p>
          <p>
            I create websites using HTML5, CSS3, Sass, and JavaScript. I also create full web applications using Ruby on Rails and Django.
          </p>
        </div>
      </section>
      <section class="part">
        <div class="sidebar">
          <span class="tag">Projects</span>
        </div>
        <div class="main">
          <h4>Collector of Cats</h4>
          <p>
            A web application that shows you a random photo of a cat, and allows you to add the photo to your album of cat photos.
          </p>
          <h4>Artify Me</h4>
          <p>
            Turn a regular photo of you into a work of art. Want to look like the Mona Lisa? Artify Me!
          </p>
        </div>
      </section>
      <section class="part">
        <div class="sidebar">
          <span class="tag">Work</span>
        </div>
        <div class="main">
          <div>
            <h4>Fomotograph</h4>
            <div class="date-range">September 2015 - Present</div>
            <p>Silicon Valley, California<br />
            Web Developer</p>
          </div>
          <div>
            <h4>Automotify</h4>
            <div class="date-range">December 2012 - September 2015</div>
            <p>London, England<br />
            Web Developer</p>
          </div>
          <div>
            <h4>Jenna's Web Development Consultancy</h4>
            <div class="date-range">August 2011 - December 2012</div>
            <p>New York, New York<br />
            Web Developer</p>
          </div>
        </div>
      </section>
    </section>
  </div>
</body>
</html>
